<template>
	<view class="home">
		<!-- 轮播图 -->
		<view class="carousel-section">
			<swiper v-if="carouselList.length > 0" class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="1000" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
				<swiper-item v-for="item in carouselList" :key="item.id">
					<image :src="item.image_url" mode="aspectFill" @click="handleCarouselClick(item)" class="carousel-image" />
				</swiper-item>
			</swiper>
			<view v-else class="empty-tip">暂无轮播图</view>
		</view>

		<!-- 服务分类列表 -->
		<view class="section-title">
			<text class="title">服务列表</text>
			<text class="subtitle">为您提供优质服务</text>
		</view>
		<view class="service-list">
			<view v-if="serviceList.length === 0" class="empty-tip">
				暂无服务内容
			</view>
			<uni-card v-else v-for="service in serviceList" :key="service.id" :title="service.title"
				:extra="getCategoryName(service.category_id)" @click="goToDetail(service.id)" class="service-card">
				<view class="service-content">
					<view class="service-main">
						<text class="service-desc">{{service.description || '暂无描述'}}</text>
						<view class="service-meta">
							<text class="category">{{getCategoryName(service.category_id)}}</text>
							<text class="time">{{formatDate(service.created_at)}}</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'

	export default {
		data() {
			return {
				carouselList: [],
				serviceList: [],
				isAdmin: false,
				categoryOptions: [
					{ value: 1, text: '家政服务' },
					{ value: 2, text: '维修服务' },
					{ value: 3, text: '教育培训' },
					{ value: 4, text: '美容美发' },
					{ value: 5, text: '健康医疗' },
					{ value: 6, text: '宠物服务' }
				]
			}
		},

		onLoad() {
			this.getCarouselList()
			this.getServiceList()
		},

		onShow() {
			// 检查是否是管理员
			const userInfo = uni.getStorageSync('userInfo')
			this.isAdmin = userInfo && userInfo.is_admin
		},

		methods: {
			// 获取轮播图列表
			async getCarouselList() {
				try {
					const res = await request({
						url: '/carousel',
						method: 'GET'
					})
					console.log(res);
					if (res.data.status === 'success') {
						console.log(res);
						this.carouselList = res.data.data.items
					}
				} catch (e) {
					console.error('获取轮播图失败:', e)
				}
			},

			// 获取服务列表
			async getServiceList() {
				try {
					const res = await request({
						url: '/services',
						method: 'GET'
					})
					console.log(res);
					if (res.data.status === 'success') {
						this.serviceList = res.data.data.items
					}
				} catch (e) {
					console.error('获取服务列表失败:', e)
				}
			},

			// 轮播图点击
			handleCarouselClick(item) {
				if (item.link) {
					uni.navigateTo({
						url: item.link
					})
				}
			},

			// 跳转到服务详情
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/home/service-detail?id=${id}`
				})
			},

			// 获取分类名称
			getCategoryName(categoryId) {
				const category = this.categoryOptions.find(item => item.value === categoryId)
				return category ? category.text : '未知分类'
			},

			// 格式化日期
			formatDate(date) {
				return new Date(date).toLocaleDateString()
			}
		}
	}
</script>

<style lang="scss">
	.home {
		.carousel-section {
			position: relative;
			margin-bottom: 30rpx;

			.carousel {
				height: 360rpx;

				.carousel-image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.section-title {
			padding: 20rpx 30rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.subtitle {
				font-size: 24rpx;
				color: #999;
				margin-left: 16rpx;
			}
		}

		.service-list {
			padding: 20rpx;

			.service-card {
				margin-bottom: 20rpx;
				border-radius: 12rpx;
				box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);

				.service-content {
					padding: 10rpx 0;

					.service-main {
						.service-desc {
							font-size: 28rpx;
							color: #666;
							line-height: 1.5;
						}

						.service-meta {
							display: flex;
							justify-content: space-between;
							margin-top: 16rpx;

							.category {
								font-size: 24rpx;
								color: #2979ff;
								background: rgba(41,121,255,0.1);
								padding: 4rpx 12rpx;
								border-radius: 20rpx;
							}

							.time {
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}
			}
		}

		.empty-tip {
			text-align: center;
			padding: 30rpx;
			color: #999;
			font-size: 28rpx;
		}
	}
</style>